<template>
  <div class="common">
    <div class="common-systems">
      <h1 class="common-text">常用系统</h1>
      <div class="system-list">
        <div class="system-item">
          <div class="system-item-content">
            <img :src="dn" alt="Icon 1" class="system-icon" />
            <div class="system-right">
              <div class="system-title">基本公共卫生服务系统</div>
              <div class="system-description">赋能基层，为居民提供均等化的基本公卫服务</div>
            </div>
          </div>
          <button class="enter-system" @click="handleClick">进入系统</button>
        </div>
        <div class="system-item">
          <div class="system-item-content">
            <img :src="ys" alt="Icon 1" class="system-icon" />
            <div class="system-right">
              <div class="system-title">家庭医生签约服务系统</div>
              <div class="system-description">高效的家庭医生工作台，强大的服务过程管理</div>
            </div>
          </div>
          <button class="enter-system" @click="handleClicks">进入系统</button>
        </div>
        <div class="system-item">
          <div class="system-item-content">
            <img :src="jx" alt="Icon 1" class="system-icon" />
            <div class="system-right">
              <div class="system-title">基本公卫绩效考核系统</div>
              <div class="system-description">基本公卫全方位、精准化绩效考核</div>
            </div>
          </div>
          <button class="enter-system" >进入系统</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dn from '../img/buiness/dn.png';
import ys from '../img/buiness/ys.png';
import jx from '../img/buiness/jx.png';

export default {
  data() {
    return {
      dn: dn,
      ys: ys,
      jx: jx
    };
  },

  methods: {
    handleClick() {
      const token = localStorage.getItem('Admin-Token');
      const linkPath = import.meta.env.VITE_PUBLIC_PATH;
      window.open(`${linkPath}?token=${encodeURIComponent(token)}`);
    },
    handleClicks() {
      const token = localStorage.getItem('Admin-Token');
      const clientId = import.meta.env.VITE_APP_CLIENT_ID;
      const linkPath = import.meta.env.VITE_HOME_PATH;
      console.log(linkPath);
      window.open(
        `${linkPath}${encodeURIComponent(token)}&clientid=${clientId}`
      );
    }
  }
};
</script>

<style scoped>
.common {
  width: 100%;
  height: 90vh;
  background-color: #e5e6e7;
  display: flex;
  justify-content: center;
  align-items: center;
}

.common-systems {
  width: 80%;
  height: 80vh;
  display: flex;
  /*border: #f8ac59 1px solid;*/
  padding: 20px;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box; /* 确保 padding 不会使容器溢出 */
  background: linear-gradient(to bottom, #52f1d4, #fff, #fff, #fff); /* 从白色到浅灰色的向下渐变 */
}

.common-text {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 50px;
  margin-left: 20px;
}

.system-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  justify-content: center;
  /*border: #0DA929 1px solid;*/
}

.system-item {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  width: 380px;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.system-item:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1),
  0 8px 16px rgba(0, 0, 0, 0.1);
}

.system-item-content {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.system-icon {
  width: 70px;
  height: 70px;
  margin-right: 15px;
}

.system-right {
  flex-grow: 1;
}

.system-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.system-description {
  color: #666;
  margin-bottom: 20px;
}

.enter-system {
  background-color: #0aaf90;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  margin-top: auto;
}

.enter-system:hover {
  background-color: #24d5b5;
}
</style>
